<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <div class="attendace-top">
          <div class="top-text">
            <p>未处理</p>
            0
          </div>
          <div class="top-btn">
            <el-button size="mini">打卡范围</el-button>
            <el-button size="mini" type="primary">设置</el-button>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top:10px">
        <el-form class="form">
          <el-form-item label="部门：" label-width="100px" />
          <el-form-item>
            <el-checkbox-group v-model="attendaceId">
              <el-checkbox v-for="item in attendanceList" :key="item.id" :label="item.name">{{ item.name }} </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <el-table
          border
          style="width: 100%"
          :data="dataList"
          :header-cell-style="{fontSize: '16px', backgroundColor: '#FAFAFA',color:'#303133'}"
        >
          <el-table-column
            prop="id"
            align="center"
            width="120"
            label="序号"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="120"
            align="center"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="120"
            align="center"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120"
            align="center"
          />
          <el-table-column
            prop="mobile"
            label="手机"
            width="120"
            align="center"
          />
          <!-- <el-table-column width="120" align="center" :label="monthOfReport">
            <template>
              <span />
            </template>
          </el-table-column> -->
        </el-table>
        <el-row type="flex" justify="center">
          <el-col :span="4">
            <el-pagination
              layout="prev, pager, next"
              :page-size="quryParams.pagesize"
              :current-page="quryParams.page"
              :total="total"
              @current-change="changPage"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getDepartmentList } from '@/api/department'
import { getAttendanceList } from '@/api/attendance'
export default {
  name: 'Attendance',
  data() {
    return {
      attendaceId: [],
      attendanceList: [],
      quryParams: {
        page: 1,
        pagezie: 10,
        deptID: null
      },
      dataList: [],
      total: 0,
      monthOfReport: null,
      tobeTaskCount: null
    }
  },
  created() {
    this.getData()
    this.getList()
  },
  methods: {
    async getData() {
      this.attendanceList = await getDepartmentList()
    },
    async getList() {
      const { data, tobeTaskCount, monthOfReport } = await getAttendanceList(this.quryParams)
      this.dataList = data.rows
      this.total = data.total
      this.monthOfReport = monthOfReport
      this.tobeTaskCount = tobeTaskCount
    },
    changPage(page) {
      this.quryParams.page = page
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .attendace-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .top-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
}
.form {
  display: flex;
}
</style>
